<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--局部组件作用-->
		<div id="app">
			<banner-com></banner-com>
		</div>
		<hr />
		<!--局部组件未作用，报错-->
		<!--如果是全局组件，不会报错-->
		<div id="app1">
			<banner-com></banner-com>
		</div>
		
		<!--<div id="banner">
			
		</div>
		<div id="nav">
			
		</div>
		<div id="top">
			
		</div>
		<div id="list1">
			
		</div>
		<div id="list2">
			
		</div>-->
		
	</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
	//创建5个组件，被vue实例管理
	//使用组件分割dom模块
	
	//1、创建全局组件
	//声明全局组件内容(vue实例可以做的，组件也可以做,只有data写法不同)
	let com1 = {
		//组件dom结构
		template: `<div id="banner">
					<div v-for="(path,index) in paths">
					<img :src="path"  @click="btn(index)" />
					<sep></sep>
					<sep />
					</div>
				</div>`,
		data:function(){
			return {
				paths:[
					"https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3062734635,4183904616&fm=96",
					"https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3062734635,4183904616&fm=96",
					"https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3062734635,4183904616&fm=96"
				]
			}
		},
		methods:{
			btn(index){
				alert(index)
			}
		},
		//组件里使用components
		components:{
			"sep":{
				template: `<div style="width: 100px;height: 10px;background: red;"></div>`
			}
		}
	}
	//2、声明全局组件，参数1：组件名，参数2：组件内容
	//Vue.component("banner-com",com1)
	
	//vue实例
	const vm = new Vue({
		el:"#app",
		data:{
			
		},
		//声明局部组件 (只作用在#app和vm实例)
		components:{
			//key值为组件名，value值为组件内容
			"banner-com":com1
		}
	});
	const vm1 = new Vue({
		el:"#app1",
		data:{
			
		},
	});
</script>